<template>
  <div>
    <el-card>
      <el-row>
        <el-col align="right">
          <el-form :inline="true"  class="demo-form-inline">
            <el-form-item label="">
              <el-input clearable v-model="searchname"  :placeholder="$t('searchPlaceholder')"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="search" icon="el-icon-search" type="primary">
                {{ $t('tableBtn.search') }}
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button @click="dialogFormVisible = true;isbianji = true" icon="el-icon-circle-plus-outline"
                         type="success">
                {{ $t('tableBtn.add') }}
              </el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-table
          border
          :data="list"
          style="width: 100%">
        <el-table-column
            prop="id"
            :label="$t('company.a')"
            align="center">
        </el-table-column>
        <el-table-column
            prop="name"
            :label="$t('company.b')"
            align="center">
        </el-table-column>
        <el-table-column
            prop="address"
            align="center"
            :label="$t('company.c')">
        </el-table-column>
        <el-table-column
            prop="telephone"
            align="center"
            :label="$t('company.d')">
        </el-table-column>
        <el-table-column
            prop="postcode"
            align="center"
            :label="$t('company.e')">
        </el-table-column>
        <el-table-column
            align="center"
            :label="$t('company.f')">
          <template slot-scope="{ row }">
            <el-button @click="bianji(row)" type="primary" size="mini">
              {{ $t('tableBtn.edit') }}
            </el-button>
            <el-button @click="del(row.id)" type="danger" size="mini">
              {{ $t('tableBtn.del') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="margin-top: 15px">
        <el-col align="right">
          <el-pagination
              @current-change="handleSizeChange"
              :current-page.sync="page"
              :page-size="10"
              background
              layout="total, prev, pager, next,jumper"
              :total="total">
          </el-pagination>
        </el-col>
      </el-row>
    </el-card>
    <el-dialog @close="close" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="公司名称" prop="name" label-width="100px">
          <el-input v-model="form.name"  autocomplete="off" />
        </el-form-item>
        <el-form-item label="公司地址" prop="address" label-width="100px">
          <el-input v-model="form.address"  autocomplete="off" />
        </el-form-item>
        <el-form-item label="公司网址" prop="netUrl" label-width="100px">
          <el-input v-model="form.netUrl"  autocomplete="off" />
        </el-form-item>
        <el-form-item label="公司号码" prop="telephone" label-width="100px">
          <el-input v-model="form.telephone"  autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { delCompany,addCompany,getCompany,modifyCompany} from "../../api";
import { deepClone,requiredRule } from "../../uilts";

const getdefaultform = () => ({
  address: "",
  name: "",
  netUrl: "",
  postCode: "",
  telephone: ""
})
export default {
  data() {
    return {
      list:[],
      dialogFormVisible:false,
      form:getdefaultform(),
      rules:{
        address: requiredRule(),
        name: requiredRule(),
        netUrl: requiredRule(),
        postCode: requiredRule(),
        telephone: requiredRule()
      },
      isbianji:false,
      total:0,
      page:1,
      searchname:""
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async search(){
      this.page = 1
      await this.getList()
    },
    async handleSizeChange(p){
      this.page = p
      await this.getList()
    },
    async getList(){
      const res = await getCompany({
        name:this.searchname,
        page:this.page
      })
      console.log(res)
      this.list = res.list
      this.total = res.total
      this.page = res.pageNum
    },
    bianji(row){
      console.log(row)
      this.isbianji = false
      this.dialogFormVisible = true
      this.form = deepClone(row)
    },
    submit(){
      this.$refs.form.validate(async (res)=>{
        if (res){
          if (this.isbianji)await addCompany(this.form)
          else await modifyCompany(this.form)
          this.$message.success('操作成功！')
          this.dialogFormVisible = false
          await this.getList()
        }
      })
    },
    del(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delCompany(id)
        this.$message.success('删除成功！！！')
        await this.getList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    close(){
      this.form = getdefaultform()
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style scoped>

</style>
